<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                <el-form-item label="uuid">
                    <el-input placeholder="搜索条件" v-model="searchInfo.licenceUUID"></el-input>
                </el-form-item>
                <el-form-item label="时长">
                    <el-input placeholder="搜索条件" v-model="searchInfo.licenceDuration"></el-input>
                </el-form-item>
                <el-form-item label="点数">
                    <el-input placeholder="搜索条件" v-model="searchInfo.LicencePoints"></el-input>
                </el-form-item>
                <el-form-item label="公司">
                    <el-input placeholder="搜索条件" v-model="searchInfo.Company"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" type="primary">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="openDialog" type="primary">新增</el-button>
                </el-form-item>
                <el-form-item>
                    <el-popover placement="top" v-model="deleteVisible" width="160">
                        <p>确定要删除吗？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button @click="deleteVisible = false" size="mini" type="text">取消</el-button>
                            <el-button @click="onDelete" size="mini" type="primary">确定</el-button>
                        </div>
                        <!--                        <el-button icon="el-icon-delete" size="mini" slot="reference" type="danger">批量删除</el-button>-->
                    </el-popover>
                </el-form-item>
            </el-form>
        </div>
        <el-table
                :data="tableData"
                @selection-change="handleSelectionChange"
                border
                ref="multipleTable"
                stripe
                style="width: 100%"
                tooltip-effect="dark"
        >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="生成时间" width="160">
                <template slot-scope="scope">{{scope.row.CreatedAt|formatDate}}</template>
            </el-table-column>
            <el-table-column label="生成者" prop="licenceAuthor" width="160" :show-overflow-tooltip="overflow"></el-table-column>
            <el-table-column label="uuid" prop="licenceUUID" width="300" :show-overflow-tooltip="overflow"></el-table-column>

            <el-table-column label="时长" prop="licenceDuration" width="60"></el-table-column>

            <el-table-column label="点数" prop="LicencePoints" width="60"></el-table-column>

            <el-table-column label="公司" prop="Company" width="270" :show-overflow-tooltip="overflow"></el-table-column>

            <el-table-column label="按钮组">
                <template slot-scope="scope">
                    <el-button type="warning" icon="el-icon-download" size="mini" @click="download(scope.row)">下载
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                :current-page="page"
                :page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                :style="{float:'right',padding:'20px'}"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>

        <el-dialog :before-close="closeDialog" :visible.sync="dialogFormVisible" title="弹窗操作">
            <el-form :model="formData" :rules="rules" ref="sysLicenceForm" label-position="right" label-width="80px">
                <el-form-item label="uuid:" prop="licenceUUID">
                    <el-input v-model="formData.licenceUUID" clearable placeholder="请输入UUID"></el-input>
                </el-form-item>

                <el-form-item label="时长:" prop="licenceDuration">
                    <el-input v-model.number="formData.licenceDuration" clearable placeholder="请输入时长，单位月"></el-input>
                </el-form-item>

                <el-form-item label="点数:" prop="LicencePoints">
                    <el-input v-model.number="formData.LicencePoints" clearable placeholder="请输入点数"></el-input>
                </el-form-item>

                <!--         <el-form-item label="公司:">-->
                <!--            <el-input v-model="formData.Company" clearable placeholder="请输入" ></el-input>-->
                <!--      </el-form-item>-->
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button @click="enterDialog" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        createSysLicence,
        deleteSysLicence,
        deleteSysLicenceByIds,
        updateSysLicence,
        findSysLicence,
        getSysLicenceList
    } from "@/api/sys_licence";  //  此处请自行替换地址
    import {formatTimeToStr} from "@/utils/date";
    import infoList from "@/mixins/infoList";
    import {downloadLicenceFile} from "../../api/excel";

    export default {
        name: "SysLicence",
        mixins: [infoList],
        data() {
            return {
                listApi: getSysLicenceList,
                dialogFormVisible: false,
                type: "",
                deleteVisible: false,
                overflow: true,
                multipleSelection: [],
                formData: {
                    licenceUUID: "",
                    licenceDuration: "",
                    LicencePoints: "",
                    Company: "奇安信",

                },
                rules: {
                    licenceUUID: [
                        {required: true, message: "请输入UUID", trigger: "blur"},
                    ],
                    licenceDuration: [
                        {required: true, type: "integer", message: "请输入正确的时长", trigger: "blur"}
                    ],
                    LicencePoints: [
                        {required: true, type: "integer", message: "请输入正确的点数", trigger: "blur"}
                    ],
                }
            };
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
                } else {
                    return "";
                }
            },
            formatBoolean: function (bool) {
                if (bool != null) {
                    return bool ? "是" : "否";
                } else {
                    return "";
                }
            }
        },
        methods: {
            //条件搜索前端看此方法
            onSubmit() {
                this.page = 1
                this.pageSize = 10
                this.getTableData()
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            download(row) {
                downloadLicenceFile(row.licencePath)
            }
            ,
            deleteRow(row) {
                this.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteSysLicence(row);
                });
            },
            async onDelete() {
                const ids = []
                if (this.multipleSelection.length == 0) {
                    this.$message({
                        type: 'warning',
                        message: '请选择要删除的数据'
                    })
                    return
                }
                this.multipleSelection &&
                this.multipleSelection.map(item => {
                    ids.push(item.ID)
                })
                const res = await deleteSysLicenceByIds({ids})
                if (res.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    if (this.tableData.length == ids.length && this.page > 1) {
                        this.page--;
                    }
                    this.deleteVisible = false
                    this.getTableData()
                }
            },
            async updateSysLicence(row) {
                const res = await findSysLicence({ID: row.ID});
                this.type = "update";
                if (res.code == 0) {
                    this.formData = res.data.resysLicence;
                    this.dialogFormVisible = true;
                }
            },
            closeDialog() {
                this.dialogFormVisible = false;
                this.formData = {
                    licenceUUID: "",
                    licenceDuration: "",
                    LicencePoints: "",
                    Company: "奇安信",

                };
            },
            async deleteSysLicence(row) {
                const res = await deleteSysLicence({ID: row.ID});
                if (res.code == 0) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    if (this.tableData.length == 1 && this.page > 1) {
                        this.page--;
                    }
                    this.getTableData();
                }
            },
            async enterDialog() {
                this.$refs.sysLicenceForm.validate(async valid => {
                    if (valid) {
                        let res;
                        switch (this.type) {
                            case "create":
                                res = await createSysLicence(this.formData);
                                break;
                            case "update":
                                res = await updateSysLicence(this.formData);
                                break;
                            default:
                                res = await createSysLicence(this.formData);
                                break;
                        }
                        if (res.code == 0) {
                            this.$message({
                                type: "success",
                                message: "创建/更改成功"
                            })
                            this.closeDialog();
                            this.getTableData();
                        }
                    } else {
                        return
                    }
                });
            },
            openDialog() {
                this.type = "create";
                this.dialogFormVisible = true;
            }
        },
        async created() {
            await this.getTableData();

        }
    };
</script>

<style>
</style>
